<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>蔬记 - 提醒中心</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4CAF50',
                        secondary: '#8BC34A',
                        light: '#E8F5E9',
                        dark: '#33691E',
                        neutral: '#F5F5F5',
                        textPrimary: '#333333',
                        textSecondary: '#666666',
                        textLight: '#999999',
                        urgent: '#FF5252',
                        urgentLight: '#FFEBEE',
                        normal: '#2196F3',
                        normalLight: '#E3F2FD',
                        low: '#757575',
                        lowLight: '#F5F5F5',
                    },
                    fontFamily: {
                        sans: ['PingFang SC', 'Microsoft YaHei', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .shadow-card {
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            }
            .tab-active {
                @apply text-primary border-b-2 border-primary;
            }
            .reminder-card-due {
                @apply border-l-4 border-urgent;
            }
            .reminder-card-soon {
                @apply border-l-4 border-amber-500;
            }
            .reminder-card-future {
                @apply border-l-4 border-normal;
            }
            .reminder-card-completed {
                @apply border-l-4 border-textLight opacity-70;
            }
        }
    </style>
</head>
<body class="bg-green-50 font-sans text-textPrimary">
    <!-- 顶部导航栏 -->
    <div class="fixed top-0 left-0 right-0 h-16 bg-white shadow-sm flex items-center justify-between px-4 z-30">
        <button class="back-btn p-2 -ml-2" onclick="goBack()">
            <i class="fa fa-chevron-left text-textPrimary"></i>
        </button>
        <h1 class="nav-title text-lg font-semibold">提醒中心</h1>
        <div class="nav-spacer w-8"></div>
    </div>

    <!-- 页面容器 -->
    <div class="page-container pt-16 pb-24 min-h-screen">
        <!-- 搜索栏 -->
        <div class="search-section px-4 py-3 bg-white">
            <div class="search-box relative flex items-center bg-neutral rounded-full px-4 py-2">
                <i class="fa fa-search text-textLight absolute left-4"></i>
                <input type="text" id="searchInput" class="search-input bg-transparent w-full pl-8 text-sm focus:outline-none" placeholder="搜索提醒...">
            </div>
        </div>

        <!-- 分类标签栏 -->
        <div class="filter-tabs overflow-x-auto whitespace-nowrap px-4 py-3 bg-white mt-2">
            <div class="inline-flex space-x-3">
                <div class="filter-tab tab-active whitespace-nowrap px-4 py-1.5 rounded-full text-sm font-medium" data-type="all" onclick="filterReminders('all')">全部</div>
                <div class="filter-tab whitespace-nowrap px-4 py-1.5 rounded-full text-sm font-medium text-textSecondary" data-type="pending" onclick="filterReminders('pending')">待完成</div>
                <div class="filter-tab whitespace-nowrap px-4 py-1.5 rounded-full text-sm font-medium text-textSecondary" data-type="completed" onclick="filterReminders('completed')">已完成</div>
                <div class="filter-tab whitespace-nowrap px-4 py-1.5 rounded-full text-sm font-medium text-textSecondary" data-type="urgent" onclick="filterReminders('urgent')">紧急</div>
            </div>
        </div>

        <!-- 提醒列表 -->
        <div class="reminders-container px-4 py-3 space-y-4" id="remindersList">
            <!-- 提醒列表将通过JavaScript动态生成 -->
        </div>

        <!-- 添加提醒按钮 -->
        <button class="add-reminder-btn fixed right-6 bottom-32 w-14 h-14 bg-primary text-white rounded-full shadow-lg flex items-center justify-center z-20" onclick="showAddReminderModal()">
            <i class="fa fa-plus text-xl"></i>
        </button>

        <!-- 空白状态提示 -->
        <div id="emptyState" class="empty-state hidden flex flex-col items-center justify-center py-16 text-center">
            <div class="empty-icon text-6xl mb-4 text-primary/20"><i class="fa fa-bell-o"></i></div>
            <div class="empty-title text-lg font-medium mb-2">暂无提醒</div>
            <div class="empty-desc text-textLight text-sm mb-6">点击右下角的按钮添加你的第一条提醒吧！</div>
            <button class="add-first-reminder-btn px-6 py-2.5 bg-primary text-white rounded-full shadow-sm font-medium transition-colors hover:bg-dark" onclick="showAddReminderModal()">
                <i class="fa fa-plus mr-1"></i> 添加提醒
            </button>
        </div>
    </div>

    <!-- 添加提醒模态框 -->
    <div id="addReminderModal" class="modal-overlay fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300">
        <div class="modal-container bg-white rounded-2xl w-[90%] max-w-md overflow-hidden transform transition-transform duration-300 translate-y-8">
            <div class="modal-content">
                <div class="modal-header flex items-center justify-between px-5 py-4 border-b border-gray-100">
                    <h3 class="modal-title text-lg font-semibold" id="modalTitle">添加提醒</h3>
                    <button class="modal-close p-2 -mr-2 text-textLight" onclick="hideAddReminderModal()">
                        <i class="fa fa-times"></i>
                    </button>
                </div>
                <form id="reminderForm" onsubmit="saveReminder(event)" class="p-5">
                    <input type="hidden" id="reminderId" value="">
                    
                    <div class="form-group mb-4">
                        <label for="reminderTitle" class="block text-sm font-medium text-textSecondary mb-1">提醒标题</label>
                        <input type="text" id="reminderTitle" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                    </div>
                    
                    <div class="form-group mb-4">
                        <label for="plant" class="block text-sm font-medium text-textSecondary mb-1">关联植物</label>
                        <select id="plant" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary appearance-none">
                            <option value="">请选择植物（可选）</option>
                            <!-- 植物选项将通过JavaScript动态生成 -->
                        </select>
                        <div class="select-icon absolute right-7 mt-6 text-textLight pointer-events-none">
                            <i class="fa fa-chevron-down"></i>
                        </div>
                    </div>
                    
                    <div class="form-group mb-4">
                        <label class="block text-sm font-medium text-textSecondary mb-1">提醒类型</label>
                        <div class="reminder-types flex flex-wrap gap-2">
                            <label class="type-label flex items-center justify-center px-3 py-1.5 border border-gray-200 rounded-lg cursor-pointer transition-all hover:border-primary hover:bg-light">
                                <input type="radio" name="reminderType" value="浇水" class="hidden" checked>
                                <i class="fa fa-tint mr-1.5 text-blue-500"></i>
                                <span class="text-sm">浇水</span>
                            </label>
                            <label class="type-label flex items-center justify-center px-3 py-1.5 border border-gray-200 rounded-lg cursor-pointer transition-all hover:border-primary hover:bg-light">
                                <input type="radio" name="reminderType" value="施肥" class="hidden">
                                <i class="fa fa-flask mr-1.5 text-yellow-500"></i>
                                <span class="text-sm">施肥</span>
                            </label>
                            <label class="type-label flex items-center justify-center px-3 py-1.5 border border-gray-200 rounded-lg cursor-pointer transition-all hover:border-primary hover:bg-light">
                                <input type="radio" name="reminderType" value="修剪" class="hidden">
                                <i class="fa fa-scissors mr-1.5 text-purple-500"></i>
                                <span class="text-sm">修剪</span>
                            </label>
                            <label class="type-label flex items-center justify-center px-3 py-1.5 border border-gray-200 rounded-lg cursor-pointer transition-all hover:border-primary hover:bg-light">
                                <input type="radio" name="reminderType" value="病虫害" class="hidden">
                                <i class="fa fa-bug mr-1.5 text-red-500"></i>
                                <span class="text-sm">病虫害</span>
                            </label>
                            <label class="type-label flex items-center justify-center px-3 py-1.5 border border-gray-200 rounded-lg cursor-pointer transition-all hover:border-primary hover:bg-light">
                                <input type="radio" name="reminderType" value="收获" class="hidden">
                                <i class="fa fa-gift mr-1.5 text-orange-500"></i>
                                <span class="text-sm">收获</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group mb-4">
                        <label for="reminderDate" class="block text-sm font-medium text-textSecondary mb-1">提醒日期</label>
                        <input type="date" id="reminderDate" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                    </div>
                    
                    <div class="form-group mb-4">
                        <label for="reminderTime" class="block text-sm font-medium text-textSecondary mb-1">提醒时间</label>
                        <input type="time" id="reminderTime" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary" required>
                    </div>
                    
                    <div class="form-group mb-6">
                        <label class="block text-sm font-medium text-textSecondary mb-2">优先级</label>
                        <div class="priority-options flex space-x-3">
                            <label class="priority-label flex-1 flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-urgent group">
                                <input type="radio" name="priority" value="urgent" class="hidden" checked>
                                <i class="fa fa-flag mr-2 text-urgent group-hover:scale-110 transition-transform"></i>
                                <span class="text-sm">紧急</span>
                            </label>
                            <label class="priority-label flex-1 flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-amber-500 group">
                                <input type="radio" name="priority" value="normal" class="hidden">
                                <i class="fa fa-flag mr-2 text-amber-500 group-hover:scale-110 transition-transform"></i>
                                <span class="text-sm">一般</span>
                            </label>
                            <label class="priority-label flex-1 flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer transition-all hover:border-low group">
                                <input type="radio" name="priority" value="low" class="hidden">
                                <i class="fa fa-flag-o mr-2 text-low group-hover:scale-110 transition-transform"></i>
                                <span class="text-sm">低</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group mb-6">
                        <label for="reminderNote" class="block text-sm font-medium text-textSecondary mb-1">备注（可选）</label>
                        <textarea id="reminderNote" rows="3" class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary resize-none"></textarea>
                    </div>
                    
                    <div class="form-actions flex space-x-3">
                        <button type="button" class="btn-secondary flex-1 px-4 py-2.5 border border-gray-200 rounded-lg text-textSecondary font-medium transition-colors hover:bg-gray-50" onclick="hideAddReminderModal()">取消</button>
                        <button type="submit" class="btn-primary flex-1 px-4 py-2.5 bg-primary text-white rounded-lg font-medium transition-colors hover:bg-dark">保存提醒</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Toast 提示 -->
    <div id="toast" class="fixed top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-textPrimary text-white px-4 py-2 rounded-lg shadow-lg opacity-0 transition-opacity duration-300 z-50">操作成功</div>

    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="tasks.html" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="reminders.html" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium">
            <i class="fa fa-bell text-lg"></i>
            <span class="text-xs mt-1">提醒</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>

    <script>
        function goBack() { window.history.back(); }

        // 提醒数据管理
        let reminders = [];
        let plants = ['番茄（樱桃）', '生菜（罗马）', '黄瓜（旱黄）', '辣椒（小米辣）', '茄子（圆茄）', '草莓（红颜）', '薄荷（留兰香）', '罗勒（甜罗勒）'];
        let currentFilter = 'all';
        let currentSearchTerm = '';

        // 获取类型图标
        function getTypeIcon(type) {
            const iconMap = {
                '浇水': { icon: 'fa-tint', color: 'text-blue-500' },
                '施肥': { icon: 'fa-flask', color: 'text-yellow-500' },
                '修剪': { icon: 'fa-scissors', color: 'text-purple-500' },
                '病虫害': { icon: 'fa-bug', color: 'text-red-500' },
                '收获': { icon: 'fa-gift', color: 'text-orange-500' }
            };
            return iconMap[type] || { icon: 'fa-bell', color: 'text-gray-500' };
        }

        // 获取优先级颜色
        function getPriorityColor(priority) {
            const colorMap = {
                'urgent': { bg: 'bg-urgentLight', text: 'text-urgent', border: 'border-urgent' },
                'normal': { bg: 'bg-normalLight', text: 'text-normal', border: 'border-normal' },
                'low': { bg: 'bg-lowLight', text: 'text-low', border: 'border-low' }
            };
            return colorMap[priority] || { bg: 'bg-gray-100', text: 'text-gray-600', border: 'border-gray-300' };
        }

        // 检查提醒是否到期
        function checkReminderDueStatus(reminder) {
            const now = new Date();
            const reminderDate = new Date(`${reminder.date}T${reminder.time}`);
            const diffTime = reminderDate - now;
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

            if (reminder.completed) {
                return 'completed';
            } else if (diffDays < 0) {
                return 'due';
            } else if (diffDays === 0) {
                return 'soon';
            } else {
                return 'future';
            }
        }

        // 初始化默认日期时间
        function setDefaultDateTime() {
            const today = new Date();
            const tomorrow = new Date();
            tomorrow.setDate(today.getDate() + 1);
            
            const yyyy = tomorrow.getFullYear();
            const mm = String(tomorrow.getMonth() + 1).padStart(2, '0');
            const dd = String(tomorrow.getDate()).padStart(2, '0');
            const hh = String(today.getHours() + 1).padStart(2, '0');
            const mi = String(Math.ceil(today.getMinutes() / 5) * 5).padStart(2, '0');
            
            document.getElementById('reminderDate').value = `${yyyy}-${mm}-${dd}`;
            document.getElementById('reminderTime').value = `${hh}:${mi}`;
        }

        // 加载植物列表
        function loadPlants() {
            const plantSelect = document.getElementById('plant');
            plants.forEach(plant => {
                const option = document.createElement('option');
                option.value = plant;
                option.textContent = plant;
                plantSelect.appendChild(option);
            });
        }

        // 初始化事件监听器
        function initEventListeners() {
            // 搜索输入事件
            document.getElementById('searchInput').addEventListener('input', function(e) {
                currentSearchTerm = e.target.value;
                applyFilters();
            });

            // 类型单选框样式处理
            const typeLabels = document.querySelectorAll('.type-label');
            typeLabels.forEach(label => {
                const radio = label.querySelector('input[type="radio"]');
                if (radio.checked) {
                    label.classList.add('border-primary', 'bg-light');
                }
                
                label.addEventListener('click', function() {
                    typeLabels.forEach(l => l.classList.remove('border-primary', 'bg-light'));
                    this.classList.add('border-primary', 'bg-light');
                });
            });

            // 优先级单选框样式处理
            const priorityLabels = document.querySelectorAll('.priority-label');
            priorityLabels.forEach(label => {
                const radio = label.querySelector('input[type="radio"]');
                if (radio.checked) {
                    const priority = radio.value;
                    const color = getPriorityColor(priority);
                    label.classList.add(color.border);
                }
                
                label.addEventListener('click', function() {
                    priorityLabels.forEach(l => {
                        l.classList.remove('border-urgent', 'border-amber-500', 'border-low');
                    });
                    const radio = this.querySelector('input[type="radio"]');
                    const priority = radio.value;
                    const color = getPriorityColor(priority);
                    this.classList.add(color.border);
                });
            });
        }

        // 过滤和搜索提醒
        function applyFilters() {
            let filtered = [...reminders];
            
            // 应用状态过滤
            if (currentFilter === 'pending') {
                filtered = filtered.filter(r => !r.completed);
            } else if (currentFilter === 'completed') {
                filtered = filtered.filter(r => r.completed);
            } else if (currentFilter === 'urgent') {
                filtered = filtered.filter(r => !r.completed && checkReminderDueStatus(r) === 'due');
            }
            
            // 应用搜索
            if (currentSearchTerm) {
                const term = currentSearchTerm.toLowerCase();
                filtered = filtered.filter(r => 
                    r.title.toLowerCase().includes(term) ||
                    (r.plant && r.plant.toLowerCase().includes(term)) ||
                    r.type.toLowerCase().includes(term) ||
                    (r.note && r.note.toLowerCase().includes(term))
                );
            }
            
            // 排序：紧急的排前面，然后按日期排序
            filtered.sort((a, b) => {
                const aStatus = checkReminderDueStatus(a);
                const bStatus = checkReminderDueStatus(b);
                
                if (aStatus === 'due' && bStatus !== 'due') return -1;
                if (aStatus !== 'due' && bStatus === 'due') return 1;
                if (aStatus === 'soon' && bStatus === 'future') return -1;
                if (aStatus === 'future' && bStatus === 'soon') return 1;
                
                const aDate = new Date(`${a.date}T${a.time}`);
                const bDate = new Date(`${b.date}T${b.time}`);
                return aDate - bDate;
            });
            
            renderReminders(filtered);
        }

        // 筛选提醒
        function filterReminders(type) {
            currentFilter = type;
            
            // 更新选中状态
            const tabs = document.querySelectorAll('.filter-tab');
            tabs.forEach(tab => {
                if (tab.dataset.type === type) {
                    tab.classList.add('tab-active');
                    tab.classList.remove('text-textSecondary');
                } else {
                    tab.classList.remove('tab-active');
                    tab.classList.add('text-textSecondary');
                }
            });
            
            applyFilters();
        }

        // 渲染提醒列表
        function renderReminders(filteredReminders) {
            const container = document.getElementById('remindersList');
            const emptyState = document.getElementById('emptyState');
            
            container.innerHTML = '';
            
            if (filteredReminders.length === 0) {
                emptyState.classList.remove('hidden');
                return;
            }
            
            emptyState.classList.add('hidden');
            
            filteredReminders.forEach(reminder => {
                const status = checkReminderDueStatus(reminder);
                const typeIcon = getTypeIcon(reminder.type);
                const priorityColor = getPriorityColor(reminder.priority);
                const reminderDate = new Date(`${reminder.date}T${reminder.time}`);
                const formattedTime = `${reminderDate.getHours().toString().padStart(2, '0')}:${reminderDate.getMinutes().toString().padStart(2, '0')}`;
                const formattedDate = `${reminderDate.getMonth() + 1}月${reminderDate.getDate()}日`;
                
                const el = document.createElement('div');
                el.className = `reminder-card bg-white rounded-xl p-4 shadow-card opacity-0 transform translate-y-10 transition-all duration-300 flex items-start`;
                el.classList.add(status === 'due' ? 'reminder-card-due' : status === 'soon' ? 'reminder-card-soon' : status === 'completed' ? 'reminder-card-completed' : 'reminder-card-future');
                
                el.innerHTML = `
                    <div class="reminder-checkbox flex-shrink-0 mr-4 mt-0.5">
                        <label class="checkbox-container block relative h-6 w-6 cursor-pointer">
                            <input type="checkbox" class="hidden" ${reminder.completed ? 'checked' : ''} data-id="${reminder.id}">
                            <div class="checkbox-mark absolute top-0 left-0 h-6 w-6 rounded-full border-2 ${reminder.completed ? 'border-primary bg-primary' : 'border-gray-300'} transition-colors flex items-center justify-center">
                                ${reminder.completed ? '<i class="fa fa-check text-white text-xs"></i>' : ''}
                            </div>
                        </label>
                    </div>
                    <div class="reminder-content flex-1 min-w-0">
                        <div class="reminder-header flex justify-between items-start">
                            <h3 class="reminder-title font-medium ${reminder.completed ? 'line-through text-textLight' : ''}">${reminder.title}</h3>
                            <div class="reminder-time text-xs text-textLight ml-2 whitespace-nowrap">${formattedTime}</div>
                        </div>
                        ${reminder.plant ? `<div class="reminder-plant text-sm text-textSecondary mt-1">${reminder.plant}</div>` : ''}
                        <div class="reminder-footer flex justify-between items-center mt-2">
                            <div class="reminder-info flex items-center">
                                <div class="reminder-type flex items-center mr-3">
                                    <i class="fa ${typeIcon.icon} ${typeIcon.color} text-sm mr-1"></i>
                                    <span class="text-xs text-textSecondary">${reminder.type}</span>
                                </div>
                                <div class="reminder-date text-xs text-textSecondary">${formattedDate}</div>
                            </div>
                            <div class="reminder-priority px-2 py-0.5 rounded-full text-xs font-medium ${priorityColor.bg} ${priorityColor.text}">${reminder.priority === 'urgent' ? '紧急' : reminder.priority === 'normal' ? '一般' : '低'}</div>
                        </div>
                        ${reminder.note ? `<div class="reminder-note text-xs text-textLight mt-2 pl-1 border-l-2 border-gray-100">${reminder.note}</div>` : ''}
                    </div>
                    <div class="reminder-actions flex-shrink-0 ml-3 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                        <button class="edit-btn p-1.5 text-textLight hover:text-primary transition-colors" onclick="editReminder(${reminder.id})"><i class="fa fa-pencil"></i></button>
                        <button class="delete-btn p-1.5 text-textLight hover:text-red-500 transition-colors" onclick="deleteReminder(${reminder.id})"><i class="fa fa-trash-o"></i></button>
                    </div>
                `;
                
                container.appendChild(el);
                
                // 添加组悬停效果
                const actionsDiv = el.querySelector('.reminder-actions');
                el.addEventListener('mouseenter', () => {
                    actionsDiv.classList.remove('opacity-0');
                    actionsDiv.classList.add('opacity-100');
                });
                el.addEventListener('mouseleave', () => {
                    actionsDiv.classList.remove('opacity-100');
                    actionsDiv.classList.add('opacity-0');
                });
                
                // 触发动画
                requestAnimationFrame(() => {
                    el.style.opacity = '1';
                    el.style.transform = 'translateY(0)';
                });
                
                // 添加复选框点击事件
                const checkbox = el.querySelector('input[type="checkbox"]');
                const checkboxMark = el.querySelector('.checkbox-mark');
                checkbox.addEventListener('change', function() {
                    const id = parseInt(this.dataset.id);
                    toggleReminderCompletion(id);
                });
            });
        }

        // 切换提醒完成状态
        function toggleReminderCompletion(id) {
            const reminder = reminders.find(r => r.id === id);
            if (reminder) {
                reminder.completed = !reminder.completed;
                saveReminders();
                applyFilters();
                showToast(reminder.completed ? '提醒已标记为完成' : '提醒已标记为待完成');
            }
        }

        // 显示添加提醒模态框
        function showAddReminderModal() {
            const modal = document.getElementById('addReminderModal');
            const modalTitle = document.getElementById('modalTitle');
            const reminderForm = document.getElementById('reminderForm');
            
            modalTitle.textContent = '添加提醒';
            document.getElementById('reminderId').value = '';
            reminderForm.reset();
            
            setDefaultDateTime();
            
            modal.classList.remove('opacity-0', 'pointer-events-none');
            modal.querySelector('.modal-container').classList.remove('translate-y-8');
            
            // 阻止页面滚动
            document.body.style.overflow = 'hidden';
        }

        // 隐藏添加提醒模态框
        function hideAddReminderModal() {
            const modal = document.getElementById('addReminderModal');
            modal.classList.add('opacity-0', 'pointer-events-none');
            modal.querySelector('.modal-container').classList.add('translate-y-8');
            
            // 恢复页面滚动
            document.body.style.overflow = '';
        }

        // 编辑提醒
        function editReminder(id) {
            const reminder = reminders.find(r => r.id === id);
            if (reminder) {
                const modal = document.getElementById('addReminderModal');
                const modalTitle = document.getElementById('modalTitle');
                
                modalTitle.textContent = '编辑提醒';
                document.getElementById('reminderId').value = reminder.id;
                document.getElementById('reminderTitle').value = reminder.title;
                document.getElementById('plant').value = reminder.plant || '';
                document.getElementById('reminderDate').value = reminder.date;
                document.getElementById('reminderTime').value = reminder.time;
                document.getElementById('reminderNote').value = reminder.note || '';
                
                // 设置类型
                const typeRadios = document.querySelectorAll('input[name="reminderType"]');
                typeRadios.forEach(radio => {
                    if (radio.value === reminder.type) {
                        radio.checked = true;
                        const label = radio.closest('.type-label');
                        label.classList.add('border-primary', 'bg-light');
                    } else {
                        const label = radio.closest('.type-label');
                        label.classList.remove('border-primary', 'bg-light');
                    }
                });
                
                // 设置优先级
                const priorityRadios = document.querySelectorAll('input[name="priority"]');
                priorityRadios.forEach(radio => {
                    if (radio.value === reminder.priority) {
                        radio.checked = true;
                        const label = radio.closest('.priority-label');
                        const color = getPriorityColor(reminder.priority);
                        label.classList.add(color.border);
                    } else {
                        const label = radio.closest('.priority-label');
                        label.classList.remove('border-urgent', 'border-amber-500', 'border-low');
                    }
                });
                
                modal.classList.remove('opacity-0', 'pointer-events-none');
                modal.querySelector('.modal-container').classList.remove('translate-y-8');
                
                // 阻止页面滚动
                document.body.style.overflow = 'hidden';
            }
        }

        // 保存提醒
        function saveReminder(event) {
            event.preventDefault();
            
            const id = document.getElementById('reminderId').value;
            const title = document.getElementById('reminderTitle').value;
            const plant = document.getElementById('plant').value;
            const type = document.querySelector('input[name="reminderType"]:checked').value;
            const date = document.getElementById('reminderDate').value;
            const time = document.getElementById('reminderTime').value;
            const priority = document.querySelector('input[name="priority"]:checked').value;
            const note = document.getElementById('reminderNote').value;
            
            if (id) {
                // 更新现有提醒
                const index = reminders.findIndex(r => r.id === parseInt(id));
                if (index !== -1) {
                    reminders[index] = {
                        ...reminders[index],
                        title,
                        plant: plant || null,
                        type,
                        date,
                        time,
                        priority,
                        note: note || null
                    };
                    showToast('提醒已更新');
                }
            } else {
                // 添加新提醒
                const newReminder = {
                    id: Date.now(),
                    title,
                    plant: plant || null,
                    type,
                    date,
                    time,
                    priority,
                    note: note || null,
                    completed: false,
                    createdAt: new Date().toISOString()
                };
                reminders.unshift(newReminder);
                showToast('提醒已添加');
            }
            
            saveReminders();
            hideAddReminderModal();
            applyFilters();
        }

        // 删除提醒
        function deleteReminder(id) {
            if (confirm('确定要删除这条提醒吗？')) {
                reminders = reminders.filter(r => r.id !== id);
                saveReminders();
                applyFilters();
                showToast('提醒已删除');
            }
        }

        // 保存提醒到本地存储
        function saveReminders() {
            localStorage.setItem('plantReminders', JSON.stringify(reminders));
        }

        // 从本地存储加载提醒
        function loadReminders() {
            const stored = localStorage.getItem('plantReminders');
            if (stored) {
                try {
                    reminders = JSON.parse(stored);
                } catch (e) {
                    reminders = [];
                }
            } else {
                // 生成一些示例数据
                generateSampleData();
            }
        }

        // 生成示例数据
        function generateSampleData() {
            const now = new Date();
            const tomorrow = new Date();
            tomorrow.setDate(now.getDate() + 1);
            const dayAfterTomorrow = new Date();
            dayAfterTomorrow.setDate(now.getDate() + 2);
            const yesterday = new Date();
            yesterday.setDate(now.getDate() - 1);
            
            function formatDate(date) {
                const yyyy = date.getFullYear();
                const mm = String(date.getMonth() + 1).padStart(2, '0');
                const dd = String(date.getDate()).padStart(2, '0');
                return `${yyyy}-${mm}-${dd}`;
            }
            
            reminders = [
                {
                    id: Date.now() - 1000,
                    title: '给番茄浇水',
                    plant: '番茄（樱桃）',
                    type: '浇水',
                    date: formatDate(now),
                    time: '08:00',
                    priority: 'urgent',
                    note: '番茄需要保持土壤湿润',
                    completed: false,
                    createdAt: now.toISOString()
                },
                {
                    id: Date.now() - 900,
                    title: '给黄瓜施肥',
                    plant: '黄瓜（旱黄）',
                    type: '施肥',
                    date: formatDate(tomorrow),
                    time: '10:30',
                    priority: 'normal',
                    note: '使用液体肥料，稀释比例1:1000',
                    completed: false,
                    createdAt: now.toISOString()
                },
                {
                    id: Date.now() - 800,
                    title: '检查生菜病虫害',
                    plant: '生菜（罗马）',
                    type: '病虫害',
                    date: formatDate(tomorrow),
                    time: '15:00',
                    priority: 'low',
                    note: '特别注意叶片背面',
                    completed: false,
                    createdAt: now.toISOString()
                },
                {
                    id: Date.now() - 700,
                    title: '收获成熟的草莓',
                    plant: '草莓（红颜）',
                    type: '收获',
                    date: formatDate(dayAfterTomorrow),
                    time: '16:30',
                    priority: 'normal',
                    note: '选择完全成熟的果实',
                    completed: false,
                    createdAt: now.toISOString()
                },
                {
                    id: Date.now() - 600,
                    title: '修剪番茄枝叶',
                    plant: '番茄（樱桃）',
                    type: '修剪',
                    date: formatDate(dayAfterTomorrow),
                    time: '09:00',
                    priority: 'low',
                    note: '修剪底部老叶和侧枝',
                    completed: false,
                    createdAt: now.toISOString()
                },
                {
                    id: Date.now() - 500,
                    title: '给辣椒浇水',
                    plant: '辣椒（小米辣）',
                    type: '浇水',
                    date: formatDate(yesterday),
                    time: '19:00',
                    priority: 'urgent',
                    note: '土壤快干了',
                    completed: true,
                    createdAt: now.toISOString()
                }
            ];
            
            saveReminders();
        }

        // 显示提示信息
        function showToast(message) {
            const toast = document.getElementById('toast');
            toast.textContent = message;
            toast.classList.add('opacity-100');
            setTimeout(() => {
                toast.classList.remove('opacity-100');
            }, 2000);
        }

        // 点击模态框外部关闭
        document.getElementById('addReminderModal').addEventListener('click', (e) => {
            if (e.target === document.getElementById('addReminderModal')) {
                hideAddReminderModal();
            }
        });

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', () => {
            loadReminders();
            loadPlants();
            setDefaultDateTime();
            initEventListeners();
            applyFilters();
        });
    </script>
    
    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="#" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium" onclick="return false;">
            <i class="fa fa-bell text-lg"></i>
            <span class="text-xs mt-1">提醒</span>
        </a>
        <a href="profile.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>
</body>
</html>